<template>
    <div>
        <header>
            <div class="search-section">
                <input placeholder="安全帽" />
                <button></button>
            </div>
        </header>
        <div class="lists">
            <h3>搜索结果共2条</h3>
            <ul>
              <li v-for="(name,index) in data" :key="index">
                <span class="checkbox"></span>
                <div>
                  <p>
                   
                    <span>{{name.weizName}}</span>
                  </p>
                  <p>安全基础管理>安全责任人</p>
                </div>
              </li>
                <!--<li v-model="name in data">
                    <span class="checkbox"></span>
                    <div>
                        <p>
                            罪业人员未配单
                            <span>安全帽</span>
                        </p>
                        <p>安全基础管理>安全责任人</p>
                    </div>
                </li>
                <li>
                    <span class="checkbox active"></span>
                    <div>
                        <p>
                            罪业人员未配单
                            <span>安全帽</span>
                        </p>
                        <p>安全基础管理>安全责任人</p>
                    </div>
                </li>-->
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'selectBrank',
  data () {
    return {
      data:[
        {
          id: "string",
          weizName: "string",
          panrentId: "string",
          tier: 0,
          createUser: "string",
          createDate: "2019-09-02T12:58:56.263Z",
          operUser: "string",
          operDate: "2019-09-02T12:58:56.263Z",
          status: "string",
          "weizOrder": 0,
          children: [
            null
          ]
        }
      ]}
  },
  created () {
    this. weizPhenoList()

  },
  methods: {
    goBack(){
      this.$router.go(-1)
    },
    weizPhenoList(){//
      this.$axiosAjax.weizPhenoList({parentId:"0"}).then((res) => {
        if(res.data.success==true){
         this.data=res.data.result
        }
      }).catch(
        (err)=>{

        }
      )
    },
  }
}
</script>
<style lang="less" scoped>
header {
    padding: 10px 20px;
    background: #ebeef3;
    .search-section {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        padding: 0 8px 0 12px;
        input {
            flex: 1;
        }
        button {
            width: 24px;
            height: 24px;
            background: url(../../../static/images/s_03.png) no-repeat center;
            background-size: contain;
        }
    }
}
.lists {
    padding-left: 20px;
    h3 {
        color: #666;
        font-size: 15px;
        height: 55px;
        line-height: 55px;
        border-bottom: 1px solid #f0eff5;
    }
    li {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #f0eff5;
        .checkbox {
            position: relative;
            width: 16px;
            height: 16px;
            background: url(../../../static/images/checkbox.png) no-repeat
                center;
            background-size: cover;
            margin-right: 20px;
            &.active {
                background: url(../../../static/images/checked.png) no-repeat
                center;
                background-size: cover;
            }
        }
        div {
            flex: 1;
            p {
                &:nth-child(1) {
                    line-height: 22px;
                    color: #333;
                    font-size: 14px;
                }
                &:nth-child(2) {
                    line-height: 20px;
                    color: #999999;
                    font-size: 12px;
                }
                span {
                    color: #2369fd;
                }
            }
        }
    }
}
</style>
